<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page session="false" %>

<script>
	$(function() {
		$('[rel=tooltip]').tooltip();
	});
	
	function Setup(obj) 
	{
		var form = $(obj).closest('form');
	    var formdata = form.serialize();
	    $(".values").remove();
	
		$.ajaxSetup({
				type : "post",
				dataType : "json",
				data : formdata,
				error : function() {
					alert("실패");
				},
				success : re_table
			});
	}

	/* no ajax
	function fn_co_delete(obj)
	{
		var form = $(obj).closest('form');
		form.attr('action', "/co_delete;");
		form.submit();
	}
	
	function fn_co_update_com(obj)
	{
		var form = $(obj).closest('form');
		form.attr('action', "/co_update_com;");
		form.submit();
	} */

	function re_table(data)
	{
		$(data).each(
			function() {
				var $row = $("<tr>").addClass("values");
				$row.append("<td>" 
					+ '<form method="post" class="form-inline" style = "height:30px;">' 
					+ '<span id="co_content">' + this.content + '</span>'
					+ '<input type="text" class="form-control input-sm" style="display:none;" name="content">' 
					+ '<input type="hidden" value="' + this.co_seq + '" name="co_seq">' 
					+ '<input type="hidden" value="' + this.seq + '" name="seq">' 
					+ '<input type="hidden" value="' + this.date + '" name="date">' 
					+ '<div class="pull-right">' 
					+ '<button type="button" class="btn btn-default btn-xs totp" rel="tooltip" title="수정" onclick="fn_co_update(this);"><span class="glyphicon glyphicon-refresh"></span></button>' 
					+ '<button type="button" class="btn btn-default btn-xs totp" rel="tooltip" title="저장" style="display:none" onclick="fn_co_update_com(this);"><span class="glyphicon glyphicon-ok"></span></button>' 
					+ '<button type="button" class="btn btn-default btn-xs totp" rel="tooltip" title="삭제" onclick="fn_co_delete(this);"><span class="glyphicon glyphicon-trash"></span></button>'
					+ '</div>'
					+ '</form>' 
					+ "</td>");
				$row.append("<td>" + this.date + "</td>");
				$row.appendTo($("#co_table"));
			});
	}

	function fn_addReply()
	{
		document.frm.action = "<c:url value='/addReplyform'/>";
		document.frm.submit();
	}

	function fn_co_delete(obj)
	{
		Setup(obj);

		$.ajax({
			url : "/co_delete",
		});
	}
	
	function fn_co_update(obj)
	{
		var form = $(obj).closest('form');
		var span = form.find('span');
		var button = form.find('button');
		var data = span.eq(0).html();

		span.eq(0).html('<input type="text" class="form-control input-sm" value="'+ data + '"name="content" style="width:85%">');
		button.eq(0).attr('style', "display:none;");
		button.eq(1).attr('style', "display:inline;");
	}

	function fn_co_update_com(obj)
	{
		Setup(obj);

		$.ajax({
			url : "/co_update_com",
		});
	}
	
	function fn_co_write()
	{
		$(".values").remove();
		
		$.ajax({
			url:"/co_write",
			type : "post",
			dataType : "json",
			data : $("#co_form").serialize(),
			error : function() {
				alert("실패");
			},
			success : re_table
		});
		$("input[name=content]").val("");
	}
	
	
	
</script>

<div class="row">
	<div class="col-xs-12" style="font-size:15pt;">
		<form method="post" action="/updateform" name="frm">
			<input type="hidden" name="seq" value="${view.seq}">
			<input type="hidden" name="title" value="${view.title}">
			<input type="hidden" name="writer" value="${view.writer}">
			<input type="hidden" name="content" value="${view.content}">
			<input type="hidden" name="ref" value="${view.ref}">
			<input type="hidden" name="step" value="${view.step}">
			<table class="table table-striped">
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="40%">
				</colgroup>
				<tr>
					<td>제목</td>
					<td colspan="3">${view.title}</td>
				</tr>
				<tr>
					<td>글쓴이</td>
					<td>${view.writer}</td>
					<td>날짜</td>
					<td>${view.date}</td>
				</tr>
				<tr>
					<td>내용</td>
					<td colspan="3">${view.content}</td>
				</tr>
			</table>
			<div class="pull-right">
			<p>
				<button type="submit" class="btn btn-link"><span class="glyphicon glyphicon-refresh"></span> 수정</button>
				<button type="button" class="btn btn-link" onclick="window.location='/delete?seq=${view.seq}'"><span class="glyphicon glyphicon-trash"></span> 삭제</button>
				<c:if test="${view.step == 0}">
					<button type="button" class="btn btn-link" onclick="fn_addReply();"><span class="glyphicon glyphicon-pencil"></span> 답글</button>
				</c:if>
				<button type="button" class="btn btn-link" onclick="window.location='/'"><span class="glyphicon glyphicon-list"></span> 목록</button>
			</p>
			</div>
		</form>
	</div>
</div>

<c:if test="${!empty co_list}">
	<div class="row">
		<div class="col-xs-12">
			<table id="co_table"class="table table-hover table-condensed">
				<colgroup>
					<col width="80%">
					<col width="20%">
				</colgroup>
				<thead>
					<tr>
						<th>내용</th>
						<th>날짜</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="result" items="${co_list}" varStatus="status">
						<tr class="values">
							<td>			
								<form class="form-inline" style = "height:30px;">
										<span id="co_content"><c:out value="${result.content}" /></span>
<!-- 										<input type="text" class="form-control input-sm" style="display:none;" name="content"> -->
										<input type="hidden" value="${result.co_seq}" name="co_seq">
										<input type="hidden" value="${result.seq}" name="seq">
										<input type="hidden" value="${result.date}" name="date">
										<div class="pull-right">
											<button type="button" class="btn btn-default btn-xs totp" rel="tooltip" title="수정" onclick="fn_co_update(this);"><span class="glyphicon glyphicon-refresh"></span></button>
											<button type="button" class="btn btn-default btn-xs totp" rel="tooltip" title="저장" style="display:none" onclick="fn_co_update_com(this);return false;"><span class="glyphicon glyphicon-ok"></span></button>
											<button type="button" class="btn btn-default btn-xs totp" rel="tooltip" title="삭제" onclick="fn_co_delete(this);"><span class="glyphicon glyphicon-trash"></span></button>
										</div>
								</form>
							</td>
							<td><c:out value="${result.date}" /></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
</c:if>

<div class="row">
	<div class="col-xs-12">
		<form id="co_form" onsubmit="return false;">
			<input type="hidden" name="seq" value="${view.seq}">
			<div class="input-group">
				<input type="text" name="content" class="form-control" placeholder="댓글을 입력하세요"return false;>
				 <span class="input-group-btn">
					<button class="btn btn-default" type="button" onclick="javascript:fn_co_write();">입력</button>
				</span>
			</div>
		</form>
	</div>
</div>

